import React from 'react';
import { ProFormRadio, ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {message, Radio, Tabs,Modal} from "antd";
const {TabPane} = Tabs;
const MyComponent = (props) => {
  const {isedit,issetEdit} = props
  return (
    <Modal<{
      name: string;
      company: string;
    }>
      visible={isedit}
      onCancel={()=>{issetEdit(false)}}
      width={1200}
      title="消息编辑"
      modalProps={ {
        onCancel:() => {issetEdit(false)}
      } }
      onFinish={async (values) => {
        console.log(values.name);
        message.success('提交成功');
        return issetEdit(false);
      }}
      trigger={<a>设置</a>}
    >

      <Tabs defaultActiveKey="1">
        <TabPane tab="系统通知" key="1">
          <ProFormText
            label="通知标题"
            placeholder="绑定下级通知"
            width={500}
          />
          <div style={ {display: 'flex'} }>
            <ProFormTextArea
              name="text"
              width={500}
              label="通知内容"
              placeholder="请输入名称"
            />

            <div style={ {
              background: '#f2f2f2',
              height: '97px',
              width: '500px',
              fontSize: '12px',
              display: 'flex',
              alignItems: 'center',
              marginLeft: '60px'
            } }>
              <div style={ {width: '450px', margin: '0px auto', color: '#9f9999'} }>
                请输入模板消息详细内容对应的变量。关键字个数需与已添加的模板一致。 可以使用如下变量：
                {'nikename'}用户名
              </div>
            </div>
          </div>
          <div style={ {marginLeft: '0px'} }>
            <ProFormRadio.Group
              label="状态"
              tooltip="状态"
            >
              <Radio.Group name="radiogroup" defaultValue={1}>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </ProFormRadio.Group>
          </div>
        </TabPane>
        <TabPane tab="微信模板消息" key="2">
          <ProFormText
            name="1"
            label="通知场景："
            placeholder="绑定推广关系"
            disabled={true}
          />
          <ProFormText
            name="2"
            label="模板编号："
            placeholder="OPENTM412814251"
            disabled={true}
          />
          <ProFormText
            name="3"
            label="通知标题"
            placeholder="注册完成给上级发送"
            disabled={true}
          />
          <ProFormText
            name="4"
            label="模板ID"
            placeholder="KusKZOFc_4CrRU_gzuXMdMMTfFeR-OLVVuDiMyR5PiM"
          />
          <ProFormTextArea
            name="text"
            width={500}
            disabled={true}
            label="模板"
            placeholder="模板"
          />
          <ProFormRadio.Group
            name="Radio"
            label="状态:"
            options={[
              {
                label: '开启',
                value: 'a',
              },
              {
                label: '关闭',
                value: 'b',
              },
            ]}
          />
        </TabPane>
        <TabPane tab="微信小程序提醒" key="3">
          <ProFormText
            name="1"
            label="通知场景："
            placeholder="绑定推广关系"
            disabled={true}
          />
          <ProFormText
            name="2"
            label="模板编号："
            placeholder="3801"
            disabled={true}
          />
          <ProFormText
            name="4"
            label="模板ID"
            placeholder="KusKZOFc_4CrRU_gzuXMdMMTfFeR-OLVVuDiMyR5PiM"
          />
          <ProFormTextArea
            name="text"
            width={500}
            disabled={true}
            label="模板"
            placeholder="模板"
          />
          <ProFormRadio.Group
            name="Radio"
            label="状态:"
            options={[
              {
                label: '开启',
                value: 'a',
              },
              {
                label: '关闭',
                value: 'b',
              },
            ]}
          />
        </TabPane>
      </Tabs>
    </Modal>
  );
};
export default MyComponent;
